<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
      body {
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #f0f0f0;
      }
    </style>
    <title>Document</title>
  </head>
  <body>
    <div id="container"></div>
    <script src="./asserts//konva.min.js"></script>

    <script>
      const stage = new Konva.Stage({
        container: 'container',
        width: window.innerWidth,
        height: window.innerHeight,
      })

      const layer = new Konva.Layer()
      stage.add(layer)

      // 中心点坐标
      const centerX = stage.width()
      const centerY = stage.height()

      // 柱状图的数据
      const data = [
        {
          name: '项目1',
          value: '0.8',
          color: 'green',
        },
        {
          name: '项目2',
          value: '0.3',
          color: 'blue',
        },
        {
          name: '项目3',
          value: '0.7',
          color: 'red',
        },
        {
          name: '项目4',
          value: '0.9',
          color: 'orange',
        },
        {
          name: '项目5',
          value: '0.4',
          color: 'purple',
        },
        {
          name: '项目6',
          value: '0.9',
          color: 'pink',
        },
      ]

      // 柱形图原点
      const x0 = (1 / 8) * stage.width()
      const y0 = (3 / 4) * stage.height()

      // 柱形图最大宽度,柱形图最大高度
      const width = (3 / 4) * stage.width()
      const height = (1 / 2) * stage.height()

      // 绘制底线
      const baseLine = new Konva.Line({
        // 线段的两个端点
        points: [x0, y0, x0 + width, y0],
        stroke: 'lightgreen',
        strokeWidth: 1,
      })

      layer.add(baseLine)

      // 处理数据
      // 单条区域宽度
      const singleWidth = width / data.length

      data.forEach((item, index) => {
        const rect = new Konva.Rect({
          x: x0 + index * singleWidth + (1 / 4) * singleWidth,
          // 坐标是从上到下，所以矩形起始点要是负的
          y: y0 - item.value * height,
          width: (1 / 2) * singleWidth,
          height: item.value * height,
          fill: item.color,
          opacity: 0.8,
          cornerRadius: 4,
          name: 'rect',
        })

        // 百分比文字
        const topText = new Konva.Text({
          x: x0 + index * singleWidth + (1 / 4) * singleWidth,
          y: y0 - item.value * height - (1 / 6) * singleWidth,
          text: item.value * 100 + '%',
          fontSize: (1 / 6) * singleWidth,
          width: (1 / 2) * singleWidth,
          align: 'center',
          fill: item.color,
          name: 'top-text',
        })

        // 底部文字
        const baseText = new Konva.Text({
          x: x0 + index * singleWidth + (1 / 4) * singleWidth,
          y: y0 + (1 / 6) * singleWidth,
          text: item.name,
          fontSize: (1 / 6) * singleWidth,
          width: (1 / 2) * singleWidth,
          align: 'center',
          fill: item.color,
        })

        layer.add(rect)
        layer.add(baseText)
        layer.add(topText)
      })

      layer.draw()

      // 动画
      // konva 事件监听 api
      stage.on('contentClick', () => {
        // 柱形动画
        layer.find('.rect').each((item) => {
          // 获取矩形 height 属性
          const height = item.height()

          // 设置矩形 y 属性，height 属性
          item.y(y0)
          item.height(0)

          item.to({
            duration: 1,
            y: y0 - height,
            height: height,
          })
        })

        // 文字动画
        // 柱形动画
        layer.find('.top-text').each((item) => {
          const y = item.y()
          item.y(y0)

          item.to({
            duration: 1,
            y: y,
          })
        })
      })
    </script>
  </body>
</html>
